<template>
	<div class="container">
		<!-- 主导航栏 -->
		<ul class="main-tabs clearfix">
			<li v-for="(item,index) in mainTabs.data" :key="index" v-show="item.title!='家政招聘'"
				:class="{active:index==mainTabs.index}" @click="mainTabSwitch(index)">{{item.title}}</li>
		</ul>	
			
		<div class="page-title-left" v-show="mainTabs.index==1">
			<span>礼券奖励</span>
			<span>({{sumintegralnum}})</span>
			
			
			
		</div>	
		
		<div class="page-title-left" v-show="mainTabs.index==3">
			<span>任务奖励</span>
			<span>({{sumInteralnum}})</span>
			
			
			
		</div>	
		<div v-show="mainTabs.index==0">
		<div class="page-title">
			<div class="page-title-left">
				<span>求职招聘奖励</span>
				<span>({{awardIntegralCount}})</span>
				
				
				
			</div>
			
			<div class="page-title-right">
				<!-- <div class="export-btn" @click="exportData">
          <img src="../../../assets/img/export.png" alt>
          <span>导出</span>
        </div> -->
				<!-- <export-btn :form="form" :url="url"></export-btn> -->
			</div>
		</div>
		<div class="page-main">
			<el-form ref="form" :model="form" label-width="120px">
				<el-row>
					<el-col :span="10">
						<el-form-item label="获取时间段">
							<el-date-picker v-model="form.startDate" type="date" placeholder="选择日期"
								value-format="yyyy-MM-dd" style="width: 140px;"></el-date-picker>~
							<el-date-picker v-model="form.endDate" type="date" placeholder="选择日期"
								value-format="yyyy-MM-dd" style="width: 140px;"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="14">
						<el-form-item label="姓名">
							<el-input v-model="form.nickname" placeholder="请输入姓名" style="width: 200px;" clearable>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item label="奖励积分类型">
							<el-select v-model="form.gettype" placeholder="请选择" clearable>
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="手机号码">
							<el-input v-model="form.telnum" placeholder="请输入手机号码" style="width: 200px;" clearable>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" style="text-align: right;">
						<el-button type="primary" style="width: 120px;" @click="query">查询</el-button>
					</el-col>
				</el-row>
			</el-form>
			<div v-loading="loading">
				<el-table :data="tableData" stripe style="margin-bottom: 22px;" size="small" border>
					<el-table-column prop="nickname" label="会员名称" align="center"></el-table-column>
					<el-table-column prop="telnum" label="手机号码" align="center"></el-table-column>
					<el-table-column prop="gettype" label="积分奖励类型" align="center"></el-table-column>
					<el-table-column prop="interalnum" label="奖励积分" align="center"></el-table-column>
					<el-table-column prop="insertdate" label="奖励时间" align="center"></el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="form.pageNum" :page-sizes="[10, 20, 30, 50, 100]" :page-size="form.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" background></el-pagination>
			</div>
		</div>
		</div>
		<!-- 拉新奖励 -->
		<div v-show="mainTabs.index==1">
		<span>领取时间段：</span>
			<el-date-picker v-model="form.startDate" type="date" placeholder="选择日期"
				value-format="yyyy-MM-dd" style="width: 140px;"></el-date-picker>~
			<el-date-picker v-model="form.endDate" type="date" placeholder="选择日期"
				value-format="yyyy-MM-dd" style="width: 140px;"></el-date-picker>
				<el-button type="primary" style="margin-left: 72px;" @click="mainTabSwitch(mainTabs.index)">查询</el-button>
		</div>
		
		
		
	<el-form ref="form" :model="form" label-width="120px" v-show="mainTabs.index==3">
		<el-row>
			<el-col :span="10">
				<el-form-item label="获取时间段">
					<el-date-picker v-model="form.startDate" type="date" placeholder="选择日期"
						value-format="yyyy-MM-dd" style="width: 140px;"></el-date-picker>~
					<el-date-picker v-model="form.endDate" type="date" placeholder="选择日期"
						value-format="yyyy-MM-dd" style="width: 140px;"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="14">
				<el-form-item label="姓名">
					<el-input v-model="form.nickname" placeholder="请输入姓名" style="width: 200px;" clearable>
					</el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="10">
				<el-form-item label="任务类型">
					<el-select v-model="form.gettypes" placeholder="请选择" clearable>
						<!-- <el-option v-for="item in options" :key="item.value" :label="item.label"
							:value="item.value"></el-option> -->
							
							<el-option value="SIGNFORCRED" label="签到任务"></el-option>
							<el-option value="POSTSHARINGTASKSTR" label="岗位分享任务"></el-option>
							<el-option value="RESUMEINFOMATIONSTR" label="简历完善信息任务"></el-option>
							<el-option value="POSTINGPOSTTASKSTR" label="岗位发布任务"></el-option>
							<el-option value="JOBSEEKERENTRYTASKSTR" label="求职者入职任务"></el-option>
							
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="7">
				<el-form-item label="手机号码">
					<el-input v-model="form.telnum" placeholder="请输入手机号码" style="width: 200px;" clearable>
					</el-input>
				</el-form-item>
			</el-col>
			<el-col :span="7" style="text-align: right;">
				<el-button type="primary" style="width: 120px;" @click="mainTabSwitch(3)">查询</el-button>
			</el-col>
		</el-row>
	</el-form>
		
		
		<getnewpage v-show="mainTabs.index==2"></getnewpage>
		
		<comTable :options="tableList"  v-show="mainTabs.index==1||mainTabs.index==3"
			@opencompanydialog="function(data){return opencompanydialog(data)}"
			@handleClick="function(data){return handleClick(data)}"
			 ></comTable>
			 
			 
			 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" v-show="mainTabs.index==1"
			 	:current-page="form.pageNum" :page-sizes="[10, 20, 30, 50, 100]" :page-size="form.pageSize"
			 	layout="total, sizes, prev, pager, next, jumper" :total="total4" background></el-pagination>
			 
			 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" v-show="mainTabs.index==3"
			 	:current-page="form.pageNum" :page-sizes="[10, 20, 30, 50, 100]" :page-size="form.pageSize"
			 	layout="total, sizes, prev, pager, next, jumper" :total="total3" background></el-pagination>
			 
			 <el-dialog :visible.sync="checkFlag" width="1040px" class="jhdialog">
			 	<!-- 帮这个check  弹窗绑定  date 数据里面的公司名称  和  公司id  -->
			 	<!-- 应该是给这个 check  传了一个type  为0，tabnum为 4 ， 
			         companyName为 info对象里的companyname ，companyId为info对象里的companyId
			    -->
			 	<check v-if="checkFlag" :companyName="companyname" :companyId="companyid" :type="'0'"
			 		:tabNum="'4'"></check>
			 </el-dialog>
			 
			 <el-dialog :visible.sync="dialogVisible" width="1040px">
			 	<resume-detail
			 		v-if="dialogVisible"
			 		:userid="userid"
			 		:nickName="nickName"
			 		:isShowTelphone="true"
			 	></resume-detail>
			 </el-dialog>
	</div>
</template>

<script>
	export default {
		components: { 
			exportBtn: () => import("../../../component/exportBtn/index.vue"),
			getnewpage: () => import("../videoStatistics/index.vue"),
			comTable: () => import("../../../household/common/comTable.vue"),
			check: () => import("../../socical/socialCheck/check.vue"),
			resumeDetail: () => import("../../../component/resumeDetail/index.vue")
		},
		data() {
			return {
				sumInteralnum:0,
				sumintegralnum:0,
				companyname:'',
				companyid:'',
				userid:'',
				nickName:'',
				dialogVisible:false,
				checkFlag:false,
				mainTabs: {
					index: 0, //当前是在哪个tab栏
					data: [{
							title: '求职招聘奖励'
						},
						{
							title: '礼券奖励'
						},
						{
							title: '拉新活动奖励'
						},
						{
							title: '任务奖励'
						},
					]
				},
				tableList: {
					list: [{
							title: '企业名称',
							prop: 'companyName',
							isClick: false,
							
						},
						{
							title: '所在地区',
							prop: 'telnum',
							isClick: false
						},
						{
							title: '注册时间',
							prop: 'createTime',
							isClick: false
						},
						{
							title: '礼券额度',
							prop: 'projectName',
							isClick: false
						},
						{
							title: '领取时间',
							prop: 'costStandard',
							isClick: false
						},
					],
					noOperation: true, //是否有操作项
					operation: [ //操作项内容
						{
							name: '操作',
							isBtn: false,
							title: 'openFlexDialog'
						}
					],
					data: [
						/* {
							companyName: '上海天都人力资源有限公司',
							telnum: '15202120781',
							createTime: '2020-10-12',
							projectName: '帮助公司设计官方网站',
							costStandard: '5000元',
						} */
					]
				},
				form: {
					startDate: '', //获取开始时间段
					endDate: '', //获取结束时间段
					nickname: "", //姓名
					gettype: "", //奖励积分类型.
					gettypes: "", //任务类型
					telnum: '', //手机号码
					pageNum: 1,
					pageSize: 10,
				},
				url: "/app/v1/platform/summary/selectAwardIntegralListXSSFWorkBook",
				options: [{
					value: 'JOB',
					label: '入职奖励'
				}, {
					value: 'TG',
					label: '邀约入职奖励'
				}, {
					value: 'HRZP',
					label: '招聘奖励'
				},
				{
					value: 'JOBRETURNINTEGRAL',
					label: '专享岗位招聘奖励'
				},
				{
					value: 'ENTRYRETURNINTEGRAL',
					label: '专享岗位入职奖励'
				},
				
				
				 ],
				tableData: [],
				total: 0,
				total3:0,
				total4:0,
				awardIntegralCount: 0,
				loading: false,

				dialogVisible: false,
				detail: {}
			}
		},
		created() {
			this.getTableData();
			this.awardIntegralCount = this.$route.params.id;
		},
		methods: {
			handleClick(row){
				console.log(row);
					this.userid = row.userid;
					this.nickName = row.username;
				this.dialogVisible = true;
			},
			
			opencompanydialog(data){
				console.log(data);
				this.companyid=data.companyid
				this.companyname=data.companyname
				this.checkFlag=true
			},
			
			//主导航了切换
			mainTabSwitch(index) {
					this.mainTabs.index=index
				if(this.mainTabs.index==1){
					this.tableList.list= [{
							title: '企业名称',
							prop: 'companyname',
							isClick: true,
							eventName: 'opencompanydialog'
						},
						{
							title: '所在地区',
							prop: 'address',
							isClick: false
						},
						{
							title: '注册时间',
							prop: 'registertime',
							isClick: false
						},
						{
							title: '创建者',
							prop: 'username',
							isClick: true,
							eventName: 'handleClick'
						},
						{
							title: '礼券额度',
							prop: 'integralnum',
							isClick: false
						},
						{
							title: '领取时间',
							prop: 'insertdate',
							isClick: false
						},
					]
					
					let param = {
						startdate:this.form.startDate,
						enddate:this.form.endDate,
						pageNum:this.form.pageNum,
						pageSize:this.form.pageSize,
					}
					this.tableList.noOperation=false
					this.$ceshiGetAxios('/v1/common/discountVoList',  param).then(res => {
						this.tableList.data=res.data.data.dlist
						this.total4=Math.abs(res.data.data.total)
						this.sumintegralnum= res.data.data.sumintegralnum
					})
					
				}else if (this.mainTabs.index==3){
					this.tableList.list= [{
							title: '会员名称',
							prop: 'username',
							isClick: false,
						},
						{
							title: '手机号码',
							prop: 'telnum',
							isClick: false
						},
						{
							title: '任务类型',
							prop: 'gettype',
							isClick: false
						},
						{
							title: '奖励积分',
							prop: 'interalnum',
							isClick: false,
						},
						{
							title: '奖励时间',
							prop: 'insertdate',
							isClick: false
						},
					]
					
					
					let param = {
					pageNum:this.form.pageNum,	
					pageSize:this.form.pageSize,
					nickname:this.form.nickname,
					gettype:this.form.gettypes,
					startDate:this.form.startDate,
					endDate:this.form.endDate,
					telnum:	this.form.telnum,	
					}
					this.tableList.noOperation=false
					this.$ceshiAxios.post('/v1/Signredits/tasklist',  param).then(res => {
						console.log(res); 
						this.tableList.data=res.data.data.list
						this.total3=Math.abs(res.data.data.totalsum)
						this.sumInteralnum=res.data.data.sumInteralnum
					})
					
				}
				
				
				this.mainTabs.index = index;
				console.log(this.mainTabs.index);
				
				
			},
			// 选择城市
			handleCityChange(val) {
				this.form.citys = val;
				this.form.province = val[0];
				this.form.city = val[1];
				this.form.area = val[2];
			},
			// 时间比较
			compareDate() {
				let startdate = Date.parse(this.form.startDate);
				let enddate = Date.parse(this.form.endDate);
				if (startdate > enddate) {
					this.$message({
						message: '开始时间不能大于结束时间',
						type: 'error'
					});
					return false;
				} else {
					return true;
				}
			},
			getTableData() {
				if (!this.compareDate()) {
					return
				} else {
					this.$ceshiAxios.post('/v1/platform/summary/selectAwardIntegralList', this.form).then(res => {
						console.log(res);
						if (res.data.message === 'success.') {
							let result = res.data.data;
							this.tableData = res.data.data.awardIntegralListResponses;
							this.total = Math.abs(result.totalnum || 0);
						}
					})
				}
			},
			// 查询
			query() {
				this.form.pagenum = 1;
				this.getTableData();
			},
			// 分页
			handleCurrentChange(val) {
				this.form.pageNum = val;
				this.getTableData();
				this.mainTabSwitch(this.mainTabs.index)
			},
			handleSizeChange(val) {
				// this.form.pagenum = 1;
				this.form.pageSize = val;
				this.getTableData();
				this.mainTabSwitch(this.mainTabs.index)
			},
		}
	}
</script>

<style scoped="scoped">
	.container {
		background-color: #fff;
		height: 100%;
		padding-left: 20px;
	}

	.main-tabs {
		background-color: #EFF1F8;
		margin-bottom: 20px;
		margin-left: -20px;
		padding-left: 50px;
	}

	.main-tabs li {
		height: 40px;
		line-height: 40px;
		float: left;
		margin: 10px 20px;
		padding: 0 30px;
		cursor: pointer;
	}

	.main-tabs .active {
		background: #0064E4;
		border-radius: 20px;
		color: #fff;
	}

	.page {
		min-width: 1060px;
		background-color: #eff1f8;
		box-sizing: border-box;
		padding: 10px;
	}

	.page-title {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 0 20px;
		border-bottom: 1px solid #ddd;
	}

	.page-title-left {
		font-size: 18px;
	}

	.page-title-left::before {
		content: "";
		border-left: 12px solid #0064e4;
		margin-right: 10px;
		line-height: 60px;
	}

	.page-title-left span:nth-of-type(2) {
		color: #08b60c;
	}

	.page-title-right {
		display: flex;
		align-items: center;
	}

	.page-main {
		background-color: #fff;
		padding: 22px 20px;
	}

	.dialog-title {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 0 20px;
		border-bottom: 1px solid #ddd;
	}

	.dialog-title-left {
		font-size: 18px;
	}

	.dialog-title-left::before {
		content: "";
		border-left: 12px solid #0064e4;
		margin-right: 10px;
		line-height: 60px;
	}

	.dialog-main {
		padding: 20px;
		font-size: 16px;
	}

	.dialog-main .el-row {
		margin-bottom: 28px;
	}

	.dialog-main .el-row:nth-last-of-type(1) {
		margin-bottom: 60px;
	}
</style>
